<template>
  <div class="debugging-container">
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
      <el-tab-pane label="模块调试" name="1"></el-tab-pane>
      <el-tab-pane label="荧光调试" name="2"></el-tab-pane>
    </el-tabs>
    <div v-show="activeTop == 1">
      <div class="model-alert">注：对于标准机或已出厂仪器无特殊情况禁止使用本模块功能改写参数，负责会影像仪器正常使用</div>
      <div class="model-list-group">
        <div class="model-list">
          <div class="model-list-box">
            <div class="model-title">仪器机身信息</div>
            <div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">公司代码：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value"></el-input>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">公司名称：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value"></el-input>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">版本号：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value"></el-input>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">UDI：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value"></el-input>
                  </el-col>
                </el-row>
              </div>
              <div class="footer-buuton">
                <el-button type="primary">读</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="model-list">
          <div class="model-list-box">
            <div class="model-title">基础功能</div>
            <div style="padding:6px;">
              <div class="list-group">
                <el-button type="primary">复位</el-button>
                <el-button type="primary">待机位</el-button>
                <el-button type="primary">扫条码</el-button>
              </div>
              <div class="list-group">
                <el-button type="primary">读数(1)</el-button>
                <el-button type="primary">读数(5)</el-button>
                <span class="list-title" style="margin-left:10px;">试剂卡条码</span>
              </div>
              <div class="list-group">
                <el-button type="primary">是否有卡</el-button>
                <el-input placeholder="" v-model="value" style="width:150px;margin-left:10px;"></el-input>
                <el-input placeholder="" v-model="value" style="width:60%;margin-left:10px;"></el-input>
              </div>
              <div class="list-group">
                <el-button type="primary">是否有卡</el-button>
                <el-input placeholder="" v-model="value" style="width:150px;margin-left:10px;"></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="model-list">
          <div class="model-list-box">
            <div class="model-title">条码/测试</div>
            <div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">条码源点：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value" style="width:150px;"></el-input>
                    <el-button type="primary" style="margin-left:10px;">读</el-button>
                    <el-button type="primary">写</el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">条码放大倍数：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value" style="width:150px;"></el-input>
                    <el-button type="primary" style="margin-left:10px;">读</el-button>
                    <el-button type="primary">写</el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">窗口长度：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value" style="width:150px;"></el-input>
                    <el-button type="primary" style="margin-left:10px;">读</el-button>
                    <el-button type="primary">写</el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">测试放大倍数：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value" style="width:150px;"></el-input>
                    <el-button type="primary" style="margin-left:10px;">读</el-button>
                    <el-button type="primary">写</el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <div class="list-title list-title-right">测试原点：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-input placeholder="" v-model="value" style="width:150px;"></el-input>
                    <el-button type="primary" style="margin-left:10px;">读</el-button>
                    <el-button type="primary">写</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="activeTop == 2">
      <div class="debugging-top">
        <div class="debugging-top-left">
          <div class="debugging-handle-box">
            <el-input placeholder="" v-model="fileName" class="inputbox" style="width: 75%; margin-right: 10px"></el-input>
            <span style="padding:8px;"></span>
            <el-upload :action="docLoadPath" :show-file-list="false" :on-error="handleError" :on-success="handleBeforeUpload1" :before-upload="beforeUpload">
              <el-button type="primary" style="margin-right:10px;">打开</el-button>
            </el-upload>
            <el-button type="success" @click="handle(1)">保存</el-button>
            <el-button type="danger" @click="handle(2)">删列</el-button>
            <el-button @click="handle(2)">计算</el-button>
            <el-button type="warning" @click="handle(2)">导出</el-button>
          </div>
          <div class="eacharts-group" id="eachartSing" style="height:420px;"></div>
        </div>
        <div class="debugging-top-right">
          <div class="group-border" style="padding:0 6px;">
            <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div class="list-title">次数：</div>
                </el-col>
                <el-col :span="9">
                  <el-select v-model="value" placeholder="" style="width:120px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <div class="list-title">窗口长度：</div>
                </el-col>
                <el-col :span="8">
                  <el-input placeholder="" v-model="value"></el-input>
                </el-col>
              </el-row>
            </div>
            <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div class="list-title">间隔：</div>
                </el-col>
                <el-col :span="21">
                  <el-select v-model="value" placeholder="" style="width:120px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-checkbox v-model="value" style="margin-left:10px;">自动丢卡</el-checkbox>
                  <el-button style="margin-left:10px;">加卡</el-button>
                  <el-button>丢卡</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div class="list-title">数量：</div>
                </el-col>
                <el-col :span="21">
                  <el-select v-model="value" placeholder="" style="width:120px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div class="list-title">间隔：</div>
                </el-col>
                <el-col :span="9">
                  <el-select v-model="value" placeholder="" style="width:120px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-button type="primary">新建</el-button>
                  <el-button type="danger">测试</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-tabs style="margin-top:6px;" v-model="activeSetting" type="card" @tab-click="handleTop">
            <el-tab-pane label="峰参数设置" name="1"></el-tab-pane>
            <el-tab-pane label="T/C公式设置" name="2"></el-tab-pane>
          </el-tabs>
          <div class="group-border-top">
            <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div class="list-title">峰个数：</div>
                </el-col>
                <el-col :span="17">
                  <el-select v-model="value" placeholder="" style="width:120px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary">保存</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div class="list-title">取峰算法：</div>
                </el-col>
                <el-col :span="17">
                  <el-select v-model="value" placeholder="">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="200">
              <el-table-column label="序号" align="center" width="100" fixed>
                <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
              </el-table-column>
              <el-table-column label="起点" align="center">
                <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
              </el-table-column>
              <el-table-column label="终点" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.sex == 1">男</span>
                  <span v-if="scope.row.sex == 2">女</span>
                </template>
              </el-table-column>
              <el-table-column label="个数" align="center">
                <template slot-scope="scope">{{ scope.row.mobile }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeTop1" type="card" @tab-click="handleTop">
        <el-tab-pane label="曲线数据" name="1"></el-tab-pane>
        <el-tab-pane label="峰中心" name="2"></el-tab-pane>
        <el-tab-pane label="计算结果" name="2"></el-tab-pane>
      </el-tabs>
      <div v-show="activeTop1 == 1" style="padding:6px;">
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column label="序号" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="1" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
            <el-table-column label="2" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.sex == 1">男</span>
                <span v-if="scope.row.sex == 2">女</span>
              </template>
            </el-table-column>
            <el-table-column label="3" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="4" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="5" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
          </el-table>
      </div>
      <div class="debugging-bottom" v-show="activeTop1 == 2">
        <div class="debugging-bottom-left">
          <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" style="width:200px;">
            <el-table-column label="数据线" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="1" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="debugging-bottom-right">
          <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column label="数据项" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="平均值" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
            <el-table-column label="标准偏差" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.sex == 1">男</span>
                <span v-if="scope.row.sex == 2">女</span>
              </template>
            </el-table-column>
            <el-table-column label="cv值" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="最大值" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="最小值" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { isNumber } from 'lodash';
export default {
  data() {
    return {
      activeTop: '1',
      activeTop1: '1',
      activeSetting: '1',
      fileName: '',
      docLoadPath: '',
      value: '',
      options: [{ value: '1', label: '1' }, { value: '2', label: '2' }],
      tableData: []
    }
  },
  mounted() {
    this.eachartSing([{ planNum: 10, signInDate: 30 }]);
  },
  methods: {
    handleTop(e) {
      console.log('handleTop', e);
    },
    handle(flag) {

    },
    handleBeforeUpload1() {

    },
    beforeUpload() {

    },
    handleError() {

    },
    eachartSing(list) {
      var dom = document.getElementById('eachartSing');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let option = {
        legend: {
          data: ['计划人数', '签到人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: list.map(o => o.signInDate)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计划人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.planNum)) ? Number(o.planNum) : 0))
          },
          {
            name: '签到人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.signInNum)) ? Number(o.signInNum) : 0))
          }
        ]
      };
      myChart.setOption(option);
    },
  }
}
</script>
<style lang="less">
.debugging-container {
  .list-group {
    padding: 4px 0;
    .list-title {
      font-size: 13px;
      color: #333;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
    }
    .list-title-right {
      text-align: right;
    }
  }
  .footer-buuton {
    padding: 20px;
    text-align: center;
  }
  .el-tabs__header {
    margin: 0;
  }
  .debugging-top {
    display: flex;
    .debugging-top-left {
      flex: 1;
    }
    .debugging-top-right {
      padding: 45px 10px 10px 10px;
      width: 500px;
    }
  }
  .debugging-bottom {
    display: flex;
    .debugging-bottom-left {
      flex: 1;
    }
    .debugging-bottom-right {
      width: 700px;
    }
  }
  .debugging-handle-box {
    padding: 10px;
    display: flex;
  }
  .model-alert {
    padding: 10px;
    font-size: 12px;
    color: red;
  }
  .model-list-group {
    display: flex;
    flex-wrap: wrap;
  }
  .model-list {
    width: 50%;
    padding: 10px;
  }
  .model-list-box {
    border: 1px solid #eee;
  }
  .model-title {
    text-align: center;
    padding: 8px;
    background: #fafafa;
    font-size: 20px;
    font-weight: bold;
  }
  .group-border {
    border: 1px solid #eee;
    border-radius: 6px;
  }
  .group-border-top {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-radius: 0 0 6px 6px;
    padding: 0 6px 6px 6px;
  }
}
</style>